<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>报纸排版</title>
		<link rel="stylesheet" href="../css/test6.css" type="text/css"/>
	</head>
	<body>
		<div class="all">
			<div class="content">
				<div class="header">
					<div class="header-images">
						<div class="header-images-words">
						ife.baidu.com
						</div>
					</div>
					<div class="header-time">
						2017.09
					</div>
					<div class="header-line"></div>	
				</div>
					<div class="images">
						<div class="images-imgs">	
							<div class="opacity_left"></div>
							<div class="opacity_right"></div>
						</div>
						<div class="images-words">
							<div class="images-words-red"></div>
							<div class="images-words-words">
								about
							</div>
							<div class="images-words-words">
								technologe
							</div>
							<div class="images-words-i">
								About techniloge about techniloge about techniloge
							</div>
							<div class="images-words-number">
								700
							</div>
							<div class="images-words-botton">
								<div class="botton-float">
									3.2
								</div>
								<div class="botton-words">
									<span class="css">
										css
									</span>
									<span class="csscss">csscsscsscsscsscss</span>
								</div>
							</div>
						</div>
					</div>
					<div class="words">
						<div class="what">
							<div class="what-title title">
								what
							</div>
							<div class="article-content">
								前端前端前端前端前端前端前端前端前端前端前端
								前端前端前端前端前端前端前端前端前端前端前端
								前端前端前端前端前端前端前端前端前端前端前端
								前端前端前端前端前端前端前端前端前端前端前端
							</div>
						</div>
						<div class="when">
							<div class="when-title title">
								when
							</div>
							<div class=" when-content article-content">
								前端前端前端前端前端前端前端前端前端前端前端
								前端前端前端前端前端前端前端前端前端前端前端
								前端前端前端前端前端前端前端前端前端前端前端
								前端前端前端前端前端前端前端前端前端前端前端
							</div>
						</div>
						<div class="how">
							<div class="how-title title">
								how
							</div>
							<div class="how-content article-content">
								前端前端前端前端前端前端前端前端前端前端前端
								前端前端前端前端前端前端前端前端前端前端前端
							</div>
							<br/>
							<div class="speed">
								<span class="speed-what">
									what----------
								</span>
								<span class="speed-number">
									40%
								</span>
							</div>
								<div class="speed">
								<span class="speed-what">
									what----------
								</span>
								<span class="speed-number">
									30%
								</span>
							</div>
								<div class="speed">
								<span class="speed-what">
									what----------
								</span>
								<span class="speed-number">
									30%
								</span>
							</div>
						</div>
					</div>
					<div class="desc">
						<div class="desc-words">
							<div class="desc-words-title">
								<!--<div class="title1">-->
									<samp class="title1">
									the 
									</samp>
									<samp class="title2">
									thechnologe of foront
									</samp>
								<!--</div>-->
								<div class="title3">
									前端技术领域
								</div>
								<div class="desc-line"></div>
							</div>
								<div class="desc-words-articale">
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									<img class="article-img" src="../img/Screenshot 2017-09-08_09-26-24.png"></img>
									<p class="text">
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									</p>
									<p class="text">
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									</p>
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端
									前端前端前端前端前端前端前端前端前端前端	
									前端前端前端前端前端前端前端前端前端前端
							</div>
							</div>
							<div class="desc-img">
								<div class="desc-img-imgs">
									<img src="../img/渔舟唱晚.jpg" />
									<div class="opacity-words">
										<div class="desc-img-line"></div>
										<span class="desc-img-words1">前端技术</span>
										<span class="desc-img-words2">前端技术前端技术</span>
									</div>
								</div>
								<div class="desc-img-botton">
									<div class="desc-img-botton-wordsall">
										<div class="width">
											<div class="triangle">
												<div class="left">
											    前端前端前端前端前端前端前端前.............
												<div class="right"> 前端前端前端</div>
												</div>
											</div>
										</div>
										<div class="width">
											<div class="triangle">
												<div class="left">
											    前端前端前端前端前端前端..................
												<div class="right"> 前端前端前端前端</div>
												</div>
											</div>
										</div>
										<div class="width">
											<div class="triangle">
												<div class="left">
											    前端前端前端前端前端前端前端前端前端.......
												<div class="right"> 前端前端</div>
												</div>
											</div>
										</div>
									</div>
									<div class="desc-img-botton-red">
										<div class="desc-img-botton-0">0</div>
										<div class="desc-img-botton-white"></div>
										<div class="desc-img-botton-words">one two</div>
										<div class="desc-img-botton-words1">three fore five</div>
										<div class="hellow">hellow world hellow world hellow world </div>
									</div>
									<div class="desc-img-botton-hello">
										 <div class="mark">“</div>
										 <div class="hello"> 
										  hello world  hello world hello world hello world hello world hello world hello world
										  hello world  hello world hello world hello world hello world hello world 
										 </div>
										  <div class="mark1">”</div>
									</div>
								</div>
							</div>
						</div>
					<div class="footer">
						<div class="footer-line"></div>
						<div class="ife">ife.baidu.com</div>
					</div>	
			</div>
		</div>
	</body>
</html>
